import * as React from 'react';
import { useState } from 'react';
import classNames from 'classnames';

export interface CheckboxProps {
	children?: React.ReactNode;
	className?: string;
	checked?: boolean;
	disabled?: boolean;
}

const Checkbox: React.FC<CheckboxProps> = props => {
	const prefixCls = 'bh-checkbox';
	const {
		children,
		className,
		checked,
		disabled,
		...restProps
	} = props;
	const [checkedFlag, setCheckedFlag] = useState(!!checked)
	const classString1 = classNames(
		`${prefixCls}-wrapper`,
		className,
		{
			[`${prefixCls}-wrapper-checked`]: checkedFlag,
			[`${prefixCls}-wrapper-disabled`]: disabled,
		}
	);
	const classString2 = classNames(
		prefixCls,
		className,
		{
			[`${prefixCls}-checked`]: checkedFlag,
			[`${prefixCls}-disabled`]: disabled,
		}
	);
	const onClickCallback = () => {
		if(disabled) {
			return;
		}
		setCheckedFlag(!checkedFlag);
	};

	return (
		<div {...restProps} className={classString1} onClick={onClickCallback}>
		    <span className={classString2}>
		    	<input type="checkbox" className="bh-checkbox-input" />
		    	<span className="bh-checkbox-inner"></span>
		    </span>
		    <span>{children}</span>
		</div>
	)
};

export default Checkbox;